<template>
    <div class="container">
        <div class="header">
            <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/big-screen/header_02.png" class="img-responsive"/>
        </div>
        <div class="sub-menu">
            <div class="btn-group">
                <Button type="default" ghost><Icon type="ios-share-alt" /> 返回首页</Button>
            </div>
            <div class="county-sel">
                <CheckboxGroup v-model="border">
                    <Checkbox label="全市" ></Checkbox>
                    <Checkbox label="和平" ></Checkbox>
                    <Checkbox label="沈河" ></Checkbox>
                    <Checkbox label="铁西" ></Checkbox>
                    <Checkbox label="皇姑" ></Checkbox>
                    <Checkbox label="大东" ></Checkbox>
                    <Checkbox label="浑南" ></Checkbox>
                    <Checkbox label="于洪" ></Checkbox>
                    <Checkbox label="沈北" ></Checkbox>
                    <Checkbox label="苏家屯" ></Checkbox>
                    <Checkbox label="辽中" ></Checkbox>
                    <Checkbox label="新民" ></Checkbox>
                    <Checkbox label="法库" ></Checkbox>
                    <Checkbox label="康平" ></Checkbox>
                </CheckboxGroup>
            </div>
        </div>
        <div class="statistics-group">
            <Row :gutter="16">
                <Col span="4" v-for="(item, index) in typeNumObj" :key="index">
                    <div class="item style01">
                        <Icon type="ios-aperture" class="icon" />
                        <div class="content">
                            <div class="statistics">{{item.num}}人</div>
                            <div class="txt">{{item.name}}</div>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="report-content">
            <div class="title">
                <div class="sub-title">
                    <span>数据库记录</span>
                    <div class="group">
                        <span>{{pageObj.totalRecord}}</span>条数据信息
                    </div>
                </div>
            </div>
            <Row>
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        highlight-hover-row
                        height="1050"
                        size="medium"
                        show-overflow="tooltip"
                        :loading="tableLoading"
                        align="center"
                        header-align="center"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData"
                        :checkbox-config="{checkField: 'checked'}">
                    <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                      v-for="(item,index) in tableColumns" :key="index">
                    </vxe-table-column>
                    <vxe-table-column field="place_type_name" title="场所类别" width="150"></vxe-table-column>
                    <vxe-table-column field="statistics" title="当日人次数量" sortable min-width="150"></vxe-table-column>
                </vxe-table>
            </Row>
            <br>
            <Row type="flex" justify="center">
                <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      typeNumObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '场所名称',
          key: 'place_name',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '区、县（市）',
          key: 'area',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '街道',
          key: 'street',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '详细地址',
          key: 'place_address',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '联系人姓名',
          width: 150,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '联系电话',
          width: 150,
          tooltip: true,
          key: 'mobile',
          align: 'center'
        },
        {
          title: '备注',
          width: 150,
          tooltip: true,
          key: 'remarks',
          align: 'center'
        }
        // {
        //   title: '当日人次数量',
        //   minWidth: 150,
        //   tooltip: true,
        //   key: 'statistics',
        //   align: 'center'
        // }
      ],
      tableData: [],
      border: ['全市'],
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {},
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    }
  }
}
</script>

<style scoped>
    .container {}
    .img-responsive {
        display: inline-block;
        height: auto;
        width: 100%;
    }
    .header {
        /*margin-bottom: 20px;*/
    }
    .sub-menu {
        background-color: #052f6b;
        color: white;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 20px;
    }
    .sub-menu>.total {
        font-size: 18px;
    }
    .sub-menu>.total>span {
        color: lightcoral;
        font-weight: 700;
        margin: 0 3px;
    }
    .btn-group {
        display: flex;
    }
    .btn-group>Button {
        margin-left: 10px;
    }
    .report-content {
        padding: 0 20px;
        height: auto;
    }
    .title {
        padding: 20px 0;
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        border-left: 7px solid darkred;
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title .group>span {
        margin: 0 3px;
        font-weight: 700;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .county-sel {
        border: 1px solid white;
        border-radius: 5px;
        padding: 8px 20px;
    }
    .statistics-group {
        width: 100%;
        padding: 20px;
    }
    .statistics-group .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: white;
        border-radius: 10px;
    }
    .statistics-group .item.style01 {
        background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
    }
    .statistics-group .item.style02 {
        background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
    }
    .statistics-group .item.style03 {
        background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
    }
    .statistics-group .item.style04 {
        background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
    }
    .statistics-group .item .icon {
        font-size: 46px;
        color: white;
    }
    .statistics-group .item .content .txt{
        font-size: 14px;
        color: white;
        text-align: right;
    }
    .statistics-group .item .content .statistics{
        font-size: 32px;
        color: white;
    }
</style>
